import { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min";
import FxpgApi from "../../../../../../utils/apis/FxpgApi";
import { Card, Form, Button, Input } from "antd";

export default function FxpgbbglLook() {
  const id = useParams()?.id;
  const [xzqhIdDatas, setXzqhIdDatas] = useState();
  const [xzqhDynamicForm, setxzqhDynamicForm] = useState();
  const [form] = Form.useForm();
  const history = useHistory();
  const [componentDisabled, setComponentDisabled] = useState(true);

  useEffect(() => {
    // console.log("console.logresp)",id)
    FxpgApi.list({ id: id }).then(resp => {
      setXzqhIdDatas(resp.rows)
       console.log("resp", resp)
      // console.log("resp",
      //   ...resp.rows
      // )
      form.setFieldsValue(
        ...resp.rows
      )

    })
  }, [id, form])
  useEffect(() => {
    FxpgApi.fxpgbggltDynamicApi().then(datas => {
      //console.log("resp1", datas)
      setxzqhDynamicForm(datas)
    })
  }, [])

  const quxiaoHandle = () => {
    history.push(`/manager/fxpgbggl`)
  }
  return <div className="layout-h100 fill">
    <Card className="layout-h" >
      <header style={{
        fontSize: 20,
        fontWeight: "bold"
      }}>风险评估报告查看</header>
      <hr />
      <Form method="post" form={form}
        style={{
          flex: "flex",
          flexWrap: "wrap",
          height: "1000px"
        }}

      >
        <div className="InputForm">
          {xzqhIdDatas !== undefined && xzqhDynamicForm !== undefined && xzqhDynamicForm.map((formItem) => {
             //console.log("resp2", formItem)
            let node;
            switch (formItem.type) {
              case 'header':
                node = <><header></header></>;
                break;
              case 'input':
              default:
                node = <Input disabled={componentDisabled} 
                  style={{
                    width: '90%',
                    fontSize: '15px',
                    color:'#ffffff',
                    fontWeight: 'bold',
                    //   backgroundColor:'transparent',
                    //   opacity:'0.8'

                  }}></Input>
            }
            return <div style={{
              flexBasis: "33%",
              marginBottom: "10px"
            }}>
              <Form.Item
                label={formItem.alias}
                name={formItem.name}

              >
                {node}
              </Form.Item>
            </div>
          })}</div>
        <div className="btn-bottom" style={{
          //   marginLeft:'240px'
        }}>
          {/* <Button type="primary"
          
        >上一条</Button>
        <Button type="primary"
          
          >下一条</Button> */}
          <Button onClick={quxiaoHandle} type="primary">返回</Button>
        </div>
      </Form>
    </Card>
  </div>
}